<script>
export default {
  name: 'Map'
}
</script>
<script setup>
import * as echarts from 'echarts'
import * as China from './China.json'
import { ref, onMounted } from 'vue'

const { height } = defineProps(['height'])

const chart = ref()

onMounted(() => {
  const myEcharts = echarts.init(chart.value)

  echarts.registerMap('china', China)

  const option = {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    geo: {
      map: 'china',
      roam: true,
      zoom: 1.5,
      center: [103.948024, 37.263161],
      label: {
        show: true,
        color: '#ffffff'
      },
      itemStyle: {
        areaColor: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#2754b0' // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#11144e' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        color: '#ffffff',
        borderColor: '#ffffff'
      }
    },
    series: [
      {
        type: 'lines',
        data: [
          {
            coords: [
              [87.617733, 43.792818], // 起点
              [108.320004, 22.82402] // 终点
            ]
          },
          {
            coords: [
              [108.320004, 22.82402],
              [87.617733, 43.792818]
            ]
          }
        ],
        lineStyle: {
          color: '#fffff',
          width: 5,
          opacity: 0.3,
          curveness: 0.3
        },
        effect: {
          show: true,
          symbol:
            'path://M599.06048 831.309824l12.106752-193.404928 372.860928 184.430592L984.02816 710.206464 617.906176 367.33952 617.906176 151.638016c0-56.974336-46.188544-143.064064-103.158784-143.064064-56.974336 0-103.158784 86.089728-103.158784 143.064064L411.588608 367.33952 45.461504 710.206464l0 112.129024 366.660608-184.430592 14.999552 209.27488c0 5.05344 0.594944 9.892864 1.124352 14.749696l-66.591744 60.348416 0 66.587648 153.986048-50.879488 2.43712-0.80896 147.439616 51.688448 0-66.587648-68.758528-62.253056L599.06048 831.309824z',
          symbolSize: 25,
          trailLength: 0,
          color: '#fffff',
          period: 1
        }
      },
      {
        // 带有涟漪特效动画的散点（气泡）图
        type: 'effectScatter',
        coordinateSystem: 'geo',
        showEffectOn: 'render',
        zlevel: 1,
        rippleEffect: {
          number: 3, // 波纹的数量。
          period: 5, // 动画的周期，秒数。
          scale: 17, // 动画中波纹的最大缩放比例。
          brushType: 'fill' // 波纹的绘制方式，可选 'stroke' 和 'fill'。
        },
        symbolSize: 3,
        data: [
          {
            value: [87.617733, 43.792818]
          },
          {
            value: [108.320004, 22.82402]
          }
        ]
      }
    ]
  }

  myEcharts.setOption(option)
})
</script>

<template>
  <div
    class="container"
    :style="{ height: isNaN(+height) ? height : height + 'px' }"
  >
    <div class="contentBox">
      <div
        class="chart"
        ref="chart"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  background-size: 100% 100%;
  color: white;

  .contentBox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
